<template>
  <div class="home">
    <!-- 1.导航栏 -->
    <div class="navigationBar">
      <div class="left">
        <div class="item">
          <div>
            <img src="@/assets/home/1.png" @click="router.push('/my-content')" />
          </div>
          <div>我的内容</div>
        </div>
        <div class="item">
          <div>
            <img src="@/assets/home/1.png" @click="gotoSharedContent()" />
          </div>
          <div>共享内容</div>
        </div>
        <div class="item">
          <div>
            <img src="@/assets/home/1.png" @click="router.push('/recycle')" />
          </div>
          <div>回收站</div>
        </div>
      </div>
      <div class="search">
        <el-input
          v-model="inputValue"
          class="w-50 m-2"
          placeholder="请输入瑞记文件名称"
          :prefix-icon="Search"
          @input="inputChange"
          :clearable="true"
        />
      </div>
    </div>
    <!-- 2. 头部 -->
    <div class="top">
      <b>
        <span
          style="font-size: 24px; font-family: SourceHanSansSC-medium; color: rgba(51, 51, 51, 1)"
        >
          最近
        </span>
      </b>
      <div>
        <el-dropdown popper-class="zdy_upload" placement="bottom-end">
          <el-button type="primary">
            上传<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in uploadOptions" :key="item.value" @click="uploadBtn">
                <div class="imgCont" style="margin-right: 10px">
                  <img src="@/assets/home/2.png" style="margin: 5px" />
                </div>
                <div class="cont">{{ item.label }}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 3.最近列表 -->
    <div class="tableBox">
      <div class="recentlyList">
        <!-- 3.2 列表-->
        <el-table
          :row-key="getRowKeys"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#F5F9FC' }"
          @selection-change="selectionChange"
          ref="tableRef"
          v-loading="isLoading"
          @row-click="goTodetailPage"
        >
          <el-table-column
            type="selection"
            prop="sec"
            label=""
            min-width="60"
            :reserve-selection="false"
          />
          <el-table-column prop="fileName" label="文件" min-width="509">
            <template #default="scope">
              <div class="fileContainer">
                <div class="fileImg">
                  <img v-if="scope.row.picture" :src="scope.row.picture" class="img" />
                  <!-- 视频：flv不行，avi，mov可以，m4v可以，mwv -->
                  <img
                    v-if="!scope.row.picture && ((scope.row.fileName.indexOf('.mp4') > -1) ||(scope.row.fileName.indexOf('.m4v') > -1) ||(scope.row.fileName.indexOf('.flv') > -1)||(scope.row.fileName.indexOf('.avi') > -1)||(scope.row.fileName.indexOf('.mov') > -1)||(scope.row.fileName.indexOf('.wmv') > -1))"
                    src="@/assets/my_content/video.png"
                  />
                  <!-- 音频： m4a、wav、pcm、amr -->
                  <img
                    v-if="!scope.row.picture &&(scope.row.fileName.indexOf('.mp3') > -1 || scope.row.fileName.indexOf('.m4a') > -1 || scope.row.fileName.indexOf('.wav') > -1 || scope.row.fileName.indexOf('.pcm') > -1 || scope.row.fileName.indexOf('.amr') > -1)"
                    src="@/assets/my_content/audio.png"
                  />
                </div>
                <div class="fileInfo">
                  <!-- @keyup.enter="blur(scope.row)" -->
                  <div v-if="scope.row.isShowInput">
                    <el-input
                      v-model="renameValue"
                     
                      @blur="blur(scope.row)"
                      placeholder="请输入标题"
                      clearable
                      maxlength="50"
                      ref="inputRef"
                      @keyup.enter.prevent="handleEnter(scope.row)"
                    />
                  </div>
                  <div v-else>{{ scope.row.title }}</div>

                  <!-- 失败 -->
                  <div v-if="scope.row.transferFail == 1">
                    <img src="@/assets/home/error.png" />
                    <span style="color: rgba(245, 34, 45, 1)">失败</span>
                  </div>
                  <!-- scope.row.transferFail==0  成功 / 待定-->
                  <template v-else>
                    <div v-if="scope.row.transferRate >= 100">
                      <span>{{
                        scope.row.totalTime
                          ? gettotalTimeHMS(scope.row.totalTime)
                          : scope.row.totalTime
                      }}</span>
                    </div>
                    <div v-else>
                      <img src="@/assets/home/4.png" />
                      <span style="color: rgba(255, 169, 64, 1)"
                        >转写中...{{ scope.row.transferRate }}%</span
                      >
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="不限归属" min-width="109" />
          <!-- createdTime-->
          <el-table-column prop="recentUsedTime" label="最近创建" min-width="209" >
             <template #default="scope">
               {{getYMDHS(scope.row.recentUsedTime)}} 
             </template>
          </el-table-column>
          <el-table-column prop="opration" label="操作" min-width="120" fixed="right">
            <!-- scope.row   -->
            <template #default="scope">
              <el-button link type="primary" @click.prevent.stop="edititem(scope.row)">
                重命名
              </el-button>
              <el-button
                class="deleteBtn"
                link
                type="primary"
                @click.prevent.stop="deleteitem(scope.row)"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 4. 分页 -->
    <div class="pagination-block">
      <!-- 批量移除按钮 -->
      <el-button
        :class="['shiftBtn', selectRows.length > 0 ? 'active' : '']"
        @click="shiftBtns"
        type="danger"
        >移除</el-button
      >

      <!-- 分页 -->
      <div>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="sizes,prev,  pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div>页</div>
      </div>
    </div>

    <!-- 上传弹框 -->
    <el-dialog v-model="dialogFormVisible" title="上传音视频文件">
      <template #default>
        <!-- action:要上传的地址   :show-file-list是否展示上传列表 :on-change上传文件列表改变时 :auto-upload 是否自动上传 false为手动上传  :auto-upload="false" ,-->
        <!--音频：.m4a 文件实际上是基于 MPEG-4 格式的音频文件:audio/mp4 --测试ok
              .wav :audio/wav --测试ok
              pcm、amr文件  ---未测试 audio/x-pcm,audio/amr
        -->
        <!-- 视频：flv，avi，mov--测试ok，m4v--测试ok，wmv -->
        <el-upload
          class="upload-demo"
          :auto-upload="false"
          drag
          multiple
          :show-file-list="false"
          :on-change="beforeAvatarUpload"
          :http-request="() => {}"
          :class="fileList1.length > 0 ? 'isShowUpload' : ''"
          accept=".mp3,audio/mp4,audio/wav,audio/mpeg,.mp4,.m4v,.flv,.hls,.avi,.mov,.wmv"
        >
          <img src="@/assets/home/5.png" />
          <div class="el-upload__text">将文件拖拽至此区域 或 <em>选择文件上传</em></div>
          <template #tip>
            <div
              class="el-upload__tip"
              style="color: red; font-size: 12px"
              v-if="dialogFormVisible && fileList1.length==0"
            >
              支持上传的文件格式：mp3、mp4、m4a、wav、flv、avi、mov、m4v、wmv
            </div>
          </template>
        </el-upload>
        <div v-if="fileList1.length > 0" class="showFileList">
          <div class="top1">
            <div>已选文件: {{ fileList1.length }}</div>
            <div class="tianjia">添加</div>
          </div>
          <div class="fileList">
            <el-scrollbar max-height="150px">
              <ul>
                <li v-for="(item, i) in fileList1" :key="i">
                  <!-- 1.左侧 -->
                  <div>
                    <img src="@/assets/home/9.png" />
                    <div>
                      <div class="name">{{ item.name }}</div>
                      <div class="size">{{ (item.size / 1024 / 1024).toFixed(2) }} MB</div>
                    </div>
                  </div>
                  <div @click="deleteFileItem(item, i)">
                    <el-icon style="margin-right: 14px"><Close /></el-icon>
                  </div>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelUpload()">取消</el-button>
          
          <el-button type="primary" @click="confirmUpload()" :disabled="fileList1.length <= 0">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 上传中弹框 -->
    <div>
      <el-dialog
        v-model="uploadingStore.$state.dialogUploadingVisible"
        title="上传中"
        :modal="false"
        :align-center="false"
        class="dialoguploading"
        :before-close="beforeClose"
        :close-on-click-modal="false"
        modal-class="kk-dialog-class"
      >
        <template #header>
          <div class="title">
            <!-- 1.已全部上传 -->
            <div v-if="finishNum == uploadingStore.$state.fileList.length">已全部上传</div>

            <!-- 2.上传中，暂停 -->
            <template v-else>
              <div v-if="isContinues">上传中...{{ finishNum + 1 }}/{{ uploadingStore.$state.fileList.length }}</div>
              <div v-else>已全部暂停</div>
            </template>

            <div class="isFold" @click="isFold">
              <el-icon v-if="isFoldValue"><ArrowDown /></el-icon>
              <el-icon v-else><ArrowUp /></el-icon>
            </div>
          </div>
        </template>
        <template #default>
          <div class="showuploadingList" v-if="isFoldValue">
            <!-- 1.已全部上传 -->
            
            <div v-if="finishNum == uploadingStore.$state.fileList.length" class="top2">
              <div>已上传 {{ uploadingStore.$state.fileList.length }}/{{ uploadingStore.$state.fileList.length }} 个文件</div>
            </div>

            <!-- 2.上传中，暂停 -->
            <template v-else>
              <div class="top2" v-if="isContinues">
                <div style="opacity: 1">{{ (uploadSpeed) ? uploadSpeed : ''}}MB/s</div>
                <div class="isPause" @click="pauseUploadingItems()">全部暂停</div>
              </div>
              <div class="top2" v-else>
                <div>已上传 {{ finishNum }}/{{ uploadingStore.$state.fileList.length }} 个文件</div>
                <div class="isPause" @click="continueUploadingItems()">继续</div>
              </div>
            </template>
            <div class="uploadingList">
              <el-scrollbar max-height="150px">
                <ul>
                  <li v-for="(item, i) in uploadingStore.$state.fileList" :key="i">
                    <!-- 1.左侧 -->
                    <div>
                      <img src="@/assets/home/9.png" />
                      <div>
                        <div class="name">{{ item.name }}</div>
                        <div class="size">{{ (item.size / 1024 / 1024).toFixed(2) }} MB</div>
                      </div>
                    </div>

                    <!--0未上传 -1暂停-不上的传文件状态   1 上传中 3暂停   4已完成  5失败-->
                    <div v-if="item.isuploadFinished == 4 || item.isuploadFinished == 5">
                      <!-- 成功 -->
                      <img
                        v-if="item.isuploadFinished == 4"
                        style="width: 20px; height: 20px; margin-right: 14px"
                        src="@/assets/home/success.png"
                      />
                      <!-- 失败 -->
                      <img
                        v-if="item.isuploadFinished == 5"
                        style="width: 20px; height: 20px; margin-right: 14px"
                        src="@/assets/home/error.png"
                      />
                    </div>
                    <!--2. 上传中/暂停  -->
                    <div class="pauseOrDelBtn" v-else>
                      <!-- 暂停单个 -->
                      <img
                        v-if="item.isuploadFinished == 1 ||item.isuploadFinished == 0"
                        style="margin-right: 14px"
                        src="@/assets/home/7.png"
                        @click.prevent="pauseUploadingItems('single',i)"

                      />
                      <!-- 继续单个 -->
                      <img
                         v-if="item.isuploadFinished ==  3"
                        style="margin-right: 14px"
                        src="@/assets/home/8.png"
                        @click.prevent="continueUploadingItems('single', i)"
                      />
                      <!-- 取消 -->
                      <el-icon style="margin-right: 14px" @click.prevent="cancelFileItem(item, i)"
                        ><Close
                      /></el-icon>
                    </div>
                  </li>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted, nextTick, computed, watchEffect, onBeforeUnmount } from 'vue'
// import { storeToRefs } from 'pinia'
import { useUploadingStore } from '@/stores/uploading.js'
const uploadingStore= useUploadingStore()


import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, UploadFilled, ArrowDown, Close } from '@element-plus/icons-vue'
const router = useRouter()
// import axios from 'axios'


import { request } from '@/utils/server.js'
// 引入MD5
import { MD5 } from 'crypto-js'


// 引入Minio
// import { Minio, initMinio, putObject } from 'vue3-minio'
// import { promises } from 'stream'
// import { rawListeners } from 'process'

// 获取组织信息，并传递给后端
const userId = ref(sessionStorage.getItem('userId') || '4600072255')
// const userId = ref(sessionStorage.getItem('userId') || '4233dfdf4')

const userName = ref('益伟康')
console.log(userId.value, userName.value)

// 0.---根据用户id,查询用户信息---
const getAuth = () => {
  request
    .post('/sweet-api/auth/query', {
      userId: userId.value
    })
    .then((res) => {
      // debugger
      // console.log("查询用户名成功",res.data);
      if (res.data.code == 1) {
        userName.value = res.data.data.name || '益伟康'
      } else {
        ElMessage({
          message: res.data.msg || '查询用户名失败',
          type: 'error'
        })
      }
    })
    .catch((error) => {
      console.log('查询用户名失败', error)
      ElMessage({
        message: error || '查询用户名失败',
        type: 'error'
      })
    })
}

// 1.----获取最近列表接口-----
const isLoading = ref(false)
const getRecentlyContentList = () => {
  // debugger
  isLoading.value = true
  request
    .get(
      '/sweet-api/mainpage/' +
        userId.value +
        '?current=' +
        currentPage.value +
        '&pageSize=' +
        pageSize.value
    )
    .then((res) => {
      // debugger
      // console.log("最近列表获取成功",res.data);
      if (res.data.code == 1) {
        // isLoading.value=false
        let list = res.data.data || []
        list.forEach((item) => {
          item.isShowInput = false
        })
        
        tableData.value = list
        
      
        // 总条数
        total.value = res.data.total
      }
    })
    .catch((error) => {
      console.log('最近列表获取失败', error)
    })
    .finally(() => {
      isLoading.value = false
    })
}
// 2.----移除最近列表接口-----
const tableRef = ref('')
const delateRecentlyItem = (ids) => {
  request
    .post('/sweet-api/mainpage/remove?ids=' + ids.join(','))
    .then((res) => {
      // debugger
      // console.log("移除最近列表成功",res.data);
      if (res.data.code == 1) {
        ElMessage({
          message: '移除成功',
          type: 'success'
        })

        //移除成功，重新调用展示列表
        if (inputValue.value != '') {
          getSearchRequest()
          
        } else {
          getRecentlyContentList()
        }


        selectRows.value = []
        // 清除勾选
        tableRef.value.clearSelection()
      } else {
        ElMessage({
          message: res.data.msg || '移除失败',
          type: 'error'
        })
      }
    })
    .catch((error) => {
      console.log('移除最近列表失败', error)
      ElMessage({
        message: error || '移除失败',
        type: 'error'
      })
    })
}

//3.----重命名接口----
const resetName = (row, value) => {
  // debugger
  request
    .post('/sweet-api/file/rename', {
      id: row.id,
      name: value
    })
    .then((res) => {
      //  debugger
      // console.log("重命名成功",res.data);
      if (res.data.code == 1) {
        // debugger
        // 隐藏输入框
        row.isShowInput = false
        ElMessage({
          message: '重命名成功',
          type: 'success'
        })

        //重命名成功，重新调用展示列表
        if (inputValue.value != '') {
          getSearchRequest()
        } else {
          getRecentlyContentList()
        }
      } else {
        ElMessage({
          message: res.data.msg || '重命名失败',
          type: 'error'
        })
      }
    })
    .catch((error) => {
      console.log('重命名失败', error)
      ElMessage({
        message: error || '重命名失败',
        type: 'error'
      })
    })
}

//7.---上传完成接口---
// 全部上传完成的判断 isuploadFinished 0未上传 1 上传中 3暂停   4已完成  5失败

// 8.-----查询分片信息接口 isUpload 0否  1是
const getChunks = (videoId) => {
  return request.get('/sweet-api/oss/multipart/status/' + videoId)
}

// 9.----全局搜索接口----
const searchKeys=ref([])  //搜索分词
const getSearchRequest = () => {
  request
    .get(
      '/sweet-api/conference/search?keyWord=' +
        inputValue.value +
        '&userId=' +
        userId.value +
        '&current=' +
        currentPage.value +
        '&pageSize=' +
        pageSize.value
    )
    .then((res) => {
      // debugger
      console.log('全局搜索成功', res.data)
      if (res.data.code == 1) {
        // isLoading.value=false
        let list = res.data.data || []
        list.forEach((item) => {
          item.isShowInput = false
        })
        tableData.value = list

        // 总条数
        total.value = res.data.total

        //搜索分词
        searchKeys.value=res.data.searchKeys
      }
    })
    .catch((error) => {
      console.log('全局搜索失败', error)
    })
}

onMounted(() => {
  //发请求
  if (inputValue.value != '') {
    getSearchRequest()
  } else {
    // 调用最近列表
    getRecentlyContentList()
  }
  
  // 调用查询用户信息接口
  getAuth()

  // 轮询刷新
  setTimeoutZdy(option)
  
 
})

// 生命周期:销毁前
onBeforeUnmount(() => {
  // 退出页面 停止轮询
  option.isClose = true
  
})

//共享内容
const gotoSharedContent = () => {
  ElMessage({
    message: '功能完善中...',
    type: 'warning'
  })
}

// 1.全局搜索
const inputValue = ref('')
function debounce(func, wait, immediate) {
  let timeout
  return function () {
    let context = this
    let args = arguments
    if (timeout) {
      clearTimeout(timeout)
    }
    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, wait)
      if (callNow) {
        typeof func === 'function' && func.apply(context, args)
      }
    } else {
      timeout = setTimeout(() => {
        typeof func === 'function' && func.apply(context, args)
      }, wait)
    }
  }
}
// 搜索框输入内容变化，搜索
const inputChangeFn = () => {
  console.log(inputValue.value)
  // debugger
  //发请求
  if (inputValue.value != '') {
    getSearchRequest()
    
  } else {
    getRecentlyContentList()
  }
 
}
const inputChange = debounce(inputChangeFn, 500, false)

// 2. 上传
const uploadValue = ref('')
const uploadOptions = ref([
  {
    value: 1,
    label: '上传本地文件'
  }
  // {
  //   value: 2,
  //   label: '上传云端文件',
  // }
])
const dialogFormVisible = ref(false)
// 主页-'上传本地文件'按钮
const uploadBtn = () => {
  //展示上传弹框
  dialogFormVisible.value = true
}

// 右下角上传中弹框列表
const fileList1 = ref([])

const finishNum = computed(() => {
  let count = 0
  for (let i = 0; i < uploadingStore.$state.fileList.length; i++) {
    if (uploadingStore.$state.fileList[i].isuploadFinished == 4) {
      count++
    }
  }
  return count
})

const beforeAvatarUpload = (rawFile) => {
  console.log('0000000', rawFile)
  // debugger
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // } else
  // if (rawFile.size / 1024 / 1024 > 20) {
  //   ElMessage.error('上传文件不能超过 20MB!')
  //   return false
  // }

  for (var i = 0; i < fileList1.value.length; i++) {
    if (rawFile.name == fileList1.value[i].name) {
      ElMessage.error('上传文件名重复！')
      return
    }
  }
  for (var i = 0; i < uploadingStore.$state.fileList.length; i++) {
    if (rawFile.name == uploadingStore.$state.fileList[i].name) {
      ElMessage.error('上传文件名重复！')
      return
    }
  }
  // 0 待上传
  rawFile.isuploadFinished = 0 
  const encryptedString = MD5(rawFile.name + rawFile.size).toString()
  rawFile.md5 = encryptedString

  const controller = new AbortController()

  rawFile.controller = controller

  //分片
  // 获取文件
  var file = rawFile.raw
  // debugger
  // 设置分片大小：10MB
  var chunkSize = 10 * 1024 * 1024
  // 计算总共有多少个分片
  var totalChunk = Math.ceil(file.size / chunkSize)
  rawFile.totalChunk = totalChunk

  fileList1.value.push(rawFile)

  return true
}

// ------minio上传方法---------
const handleFiles = async (f, index, md5, totalChunk) => {
  // let res = e.target.result //ArrayBuffer

  // 创建一个用于计算上传速率的变量
  f.startTime = new Date().getTime()
  // f.uploadedBytes = 0
  f.uploadSpeed = 0

  //分片
  let multipartList
  if (f.minioChunksSecretKey) {
    multipartList = f.minioChunksSecretKey.multipartList
  }

  // 设置分片大小：10MB
  var chunkSize = 10 * 1024 * 1024
  // 数组存放所有分片
  var chunks = []
  // 遍历所有分片
  for (var j = 0; j < totalChunk; j++) {
    // 利用slice获取分片
    var start = j * chunkSize
    var end = Math.min(f.raw.size, start + chunkSize)
    // slice() 方法可从已有的数组中返回选定的元素
    var blob = f.raw.slice(start, end)
    //console.log("分片大小",blob)
    // 添加分片到数组
    chunks.push(blob)
  }

  let total = 0
  // if(f.nextPartNumberMarker && (f.nextPartNumberMarker>= multipartList.length+1) ){
  //   f.nextPartNumberMarker=multipartList.length+1
  // }
  if(chunks.length==1){
    f.nextPartNumberMarker=1
  }
  for (
    let i = f.nextPartNumberMarker ? f.nextPartNumberMarker - 1 : 0;
    i < multipartList.length;
    i++
  ) {
    // console.log("总文件大小",f.raw.size)
    console.log('start===============', i)
    console.log('nextPartNumberMarker===============', f.nextPartNumberMarker)
    await request.put(multipartList[i].uploadUrl, chunks[i], {
      signal: f.controller.signal,
      headers: {
        'Content-Type': 'application/octet-stream'
      },
      onUploadProgress: (e) => {
        let progressEvent = e.event

        if (progressEvent.lengthComputable) {
          const currentTime = new Date().getTime()

          //时间戳/1000 意思是毫秒转化为秒
          const elapsedTime = (currentTime - f.startTime) / 1000

          //progressEvent.loaded：已上传的字节数，单位为字节
          // const uploaded = progressEvent.loaded - f.uploadedBytes
          // debugger
          // B/s 比特率 每秒的上传速率  字节/秒 --k/s
          // f.uploadSpeed = (uploaded / elapsedTime / 1024 / 8).toFixed(0)
          // MB/s
          // f.uploadSpeed = (uploaded / elapsedTime / 1024)
          // console.log('上传速率',progressEvent.loaded, f.uploadedBytes )

          // 更新已上传的字节数
          // f.uploadedBytes = progressEvent.loaded

          f.uploadSpeed = (progressEvent.loaded / elapsedTime / 1024)

          // 上传进度百分比
          // let precent = (100 * progressEvent.loaded / progressEvent.total).toFixed(1);
          // console.log(precent)
        }
      }
    })
    // console.log('end===============',i)
    if (i == multipartList.length - 1) {
      // debugger
      //6. ---分片上传完后合并接口---
      let res = await request.get(
        '/sweet-api/oss/multipart/complete/' + f.minioChunksSecretKey.videoId
      )
      if (res.data.code == 1) {
        //7. --调用上传完成接口---
        let res1 = await request.get(
          '/sweet-api/oss/upload/finish/' + f.minioChunksSecretKey.videoId + '?md5=' + md5
        )
        if (res1.data.code == 1) {
          //上传成功4 
          uploadingStore.update(index,"isuploadFinished",4)
          
          //  debugger
          let count = 0
          for (let ii = 0; ii < uploadingStore.$state.fileList.length; ii++) {
            if (uploadingStore.$state.fileList[ii].isuploadFinished == 4) {
              count++
            }
          }
         
          // 调用最近列表接口
          getRecentlyContentList()
        } else {
          //上传失败5
          
          uploadingStore.update(index,"isuploadFinished",5)
        }
      } else {
        console.log('合并失败')
        // 有一片上传失败，则整个文件上传失败
     
        uploadingStore.update(index,"isuploadFinished",5)
      }
    } else {
      
    }
  }

}

// 2.1 速率计算
const uploadSpeed = ref(0)
const getuploadSpeed = () => {
  let total = 0
  let count = 0
  for (let i = 0; i < uploadingStore.$state.fileList.length; i++) {
    if (uploadingStore.$state.fileList[i].isuploadFinished == 1 && uploadingStore.$state.fileList[i].uploadSpeed) {
      total += uploadingStore.$state.fileList[i].uploadSpeed
      count++
    }
  }
  if (count == 0) {
    return "0"
  }
  // if((total / count )>1024){
    //  return (total / count/1024).toFixed(2) + "MB/s"
     return (total / count / 1024).toFixed(2)
  // }else{
    //  return (total / count).toFixed(2) + "KB/s"
  // }
}
watchEffect(() => {
  uploadSpeed.value = getuploadSpeed()
})

// 2.1 删除已选择的上传文件
const deleteFileItem = (file, i) => {
  //  debugger
  fileList1.value.splice(i, 1)
}

// 取消上传按钮
const cancelUpload = () => {
  dialogFormVisible.value = false
  fileList1.value = []
}

const fn = async () => {
  for (let i = 0; i < uploadingStore.$state.fileList.length; i++) {
    // debugger
    if (uploadingStore.$state.fileList[i].isuploadFinished == 4 || uploadingStore.$state.fileList[i].isuploadFinished == 1 || uploadingStore.$state.fileList[i].isuploadFinished == 3 ) {
      continue
    }
    const controller = new AbortController()

    uploadingStore.update(i,"controller",controller)
    

    console.log('开始上传第几个文件', i)

    //  5.----获取minio 分片密钥接口-----
    // debugger
    uploadingStore.update(i,"isuploadFinished",1)
    if (!uploadingStore.$state.fileList[i].minioChunksSecretKey) {
      let res = await request.post(
        '/sweet-api/oss/multipart/upload',
        {
          userId: userId.value,
          userName: userName.value,
          md5: uploadingStore.$state.fileList[i].md5,
          title: uploadingStore.$state.fileList[i].name,
          chunkSize: uploadingStore.$state.fileList[i].totalChunk
        },
        {
          headers: {
            // 'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
      )
      if (res.data.code == 1) {
        console.log('获取minio分片密钥成功', res.data)
        // debugger
        uploadingStore.update(i,"minioChunksSecretKey",res.data.data)

      } else {
      
        uploadingStore.update(i,"isuploadFinished",5)
        ElMessage({
          message: res.data.msg || '获取minio密钥失败',
          type: 'error'
        })
      }
    }
    // 调用getChunks获取已上传的片数信息
    let res1 = await getChunks(uploadingStore.$state.fileList[i].minioChunksSecretKey.videoId)

    // debugger
    uploadingStore.update(i,"nextPartNumberMarker",res1.data.data.nextPartNumberMarker || 0)
    // 调用minio上传
    await handleFiles(uploadingStore.$state.fileList[i], i, uploadingStore.$state.fileList[i].md5, uploadingStore.$state.fileList[i].totalChunk)
  }
}
// 2.2 上传弹框中 确定上传按钮
const confirmUpload = async () => {
  // debugger
  //关闭上传弹框
  dialogFormVisible.value = false

  // 打开上传中弹框
  
  uploadingStore.updateDialogUploadingVisible(true)

  // 折叠按钮默认打开
  isFoldValue.value = true
  // 将新增文件，加入右下角弹框列表
  uploadingStore.add(...fileList1.value)

  fileList1.value = []
  let isuploading = false
  for (let i = 0; i < uploadingStore.$state.fileList.length; i++) {
    if (uploadingStore.$state.fileList[i].isuploadFinished == 1) {
      isuploading = true
      break
    }
  }
  if (!isuploading) {
    await fn()
  }
}

// 2.3 上传中弹框

// 用于判断右上角 是显示'全部暂停' 还是 '继续'(默认继续)
const isContinues = computed(() => {
  // 如果有1个为上传中,则展示 全部暂停
  let flag = false
  for (var j = 0; j < uploadingStore.$state.fileList.length; j++) {
    if (uploadingStore.$state.fileList[j].isuploadFinished == 1) {
      flag = true
      break
    }
  }
  return flag
})

const isuploadingitem=()=>{
  let bool=false
  for(let i=0;i<uploadingStore.$state.fileList.length;i++){
    if(uploadingStore.$state.fileList[i].isuploadFinished==1){
       bool=true
       break
    }
  }
  return bool
}
// 2 全部暂停
const pauseUploadingItems =async (type,index) => {
  if(type=='single'){
    let a= uploadingStore.$state.fileList[index].isuploadFinished==1
     
    if (uploadingStore.$state.fileList[index].controller && uploadingStore.$state.fileList[index].isuploadFinished==1) {
        uploadingStore.$state.fileList[index].controller.abort()
    }
    uploadingStore.update(index,"isuploadFinished",3)

    if(index < uploadingStore.$state.fileList.length-1){
      let aindex=-1
      for(let i=index+1;i<uploadingStore.$state.fileList.length;i++){
        if(uploadingStore.$state.fileList[i].isuploadFinished==0 || uploadingStore.$state.fileList[i].isuploadFinished==1){
          aindex=i
          break 
        }
      }
      if(aindex>-1 && a){
        //如果暂停的是上传的，则暂停该上传，传下一个
        await continueUploadingItems('single',aindex)
      }else{
        
      }
      
    }
  }else{
    // debugger
    for (let i = 0; i < uploadingStore.$state.fileList.length; i++) {
      if (uploadingStore.$state.fileList[i].isuploadFinished == 4) {

      } else {
        if (uploadingStore.$state.fileList[i].controller) {
          uploadingStore.$state.fileList[i].controller.abort()
        }
        uploadingStore.update(i,"isuploadFinished",3)
      }
    }
  }
}

// 全部继续
const continueUploadingItems = async (type,index) => {
  for (let i = 0; i < uploadingStore.$state.fileList.length; i++) {
    // 如果有上传中的，则 取消上传，并 改变状态为 3
    if (uploadingStore.$state.fileList[i].isuploadFinished == 1 && uploadingStore.$state.fileList[i].controller) {
      uploadingStore.$state.fileList[i].controller.abort()
      uploadingStore.update(i,"isuploadFinished",3)

      break
    }
    if(type!="single"){
      // debugger
      if(uploadingStore.$state.fileList[i].isuploadFinished == 3 ){
        uploadingStore.update(i,"isuploadFinished",0)
      }
    }
  }
  let pos
  if(type=="single"){
    pos=index
    
  }else{
    pos=0
  }
  // debugger
  for (let i = pos; i < uploadingStore.$state.fileList.length; i++) {
    // 4 已完成
      if (uploadingStore.$state.fileList[i].isuploadFinished == 4 )  {
        continue
      }
    
    uploadingStore.update(i,"isuploadFinished",1)
    const controller = new AbortController()
    // debugger
  
    uploadingStore.update(i,"controller",controller)
    //判断 如没有密钥，则先调用密钥接口，否则直接调用getChunks接口，获取已经上传的分片数
    if (!uploadingStore.$state.fileList[i].minioChunksSecretKey) {
      let res = await request.post(
        '/sweet-api/oss/multipart/upload',
        {
          userId: userId.value,
          userName: userName.value,
          md5: uploadingStore.$state.fileList[i].md5,
          title: uploadingStore.$state.fileList[i].name,
          chunkSize: uploadingStore.$state.fileList[i].totalChunk
        },
        {
          headers: {
            // 'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
      )
      if (res.data.code == 1) {
        console.log('获取minio分片密钥成功', res.data)
        
        uploadingStore.update(i,"minioChunksSecretKey",res.data.data)
      }
    }

    let res = await getChunks(uploadingStore.$state.fileList[i].minioChunksSecretKey.videoId)
    // debugger
    
    uploadingStore.update(i,"nextPartNumberMarker",res.data.data.nextPartNumberMarker || 0)

    
    await handleFiles(uploadingStore.$state.fileList[i], i, uploadingStore.$state.fileList[i].md5, uploadingStore.$state.fileList[i].totalChunk)
  }
}

// 折叠按钮
const isFoldValue = ref(true)
const isFold = () => {
  isFoldValue.value = !isFoldValue.value
}

// 2.6 取消上传---
// const cancelfileList = ref([])
const cancelFileItem = (file, i) => {
  // debugger
  // 如果有上传中1 或 暂停3，则弹框提示
  if (uploadingStore.$state.fileList[i].isuploadFinished == 1 || uploadingStore.$state.fileList[i].isuploadFinished == 3) {
    ElMessageBox.confirm('上传尚未完成。要取消所有正在进行的上传吗？', '取消上传', {
      cancelButtonText: '继续上传',
      confirmButtonText: '取消上传',
      showClose: false,
      type: 'warning'
    })
      .then(() => {
        // debugger
        ElMessage({
          type: 'success',
          message: '取消上传'
        })

        // cancelfileList.value.push(uploadingStore.$state.fileList[i].name)
        //调用取消上传请求
        uploadingStore.$state.fileList[i].controller.abort()
        // debugger
       
        uploadingStore.del(i)
        if (uploadingStore.$state.fileList.length == 0) {
          
          uploadingStore.updateDialogUploadingVisible(false)
        }
      })
      .catch(() => {
        ElMessage({
          type: 'success',
          message: '继续上传'
        })
      })
  } else {

    uploadingStore.del(i)
  }
}

// 关闭右下角弹框 isuploadFinished
const beforeClose = () => {
  // debugger
  let count = 0
  for (let i = 0; i < uploadingStore.$state.fileList.length; i++) {
    if (uploadingStore.$state.fileList[i].isuploadFinished == 1 || uploadingStore.$state.fileList[i].isuploadFinished == 3) {
      count++
    }
  }
  // debugger
  // 如果没有上传中的文件，则直接关闭，否则需要弹框提示 '上传尚未完成。要取消所有正在进行的上传吗？'
  if (count == 0) {
   
    uploadingStore.updateDialogUploadingVisible(false)
    uploadingStore.reset()
  } else {
    ElMessageBox.confirm('上传尚未完成。要取消所有正在进行的上传吗？', '取消上传', {
      cancelButtonText: '继续上传',
      confirmButtonText: '取消上传',
      showClose: false,
      type: 'warning'
    })
      .then(() => {
        // debugger
        for (let i = 0; i < uploadingStore.$state.fileList.length; i++) {
          if (uploadingStore.$state.fileList[i].isuploadFinished == 1 || uploadingStore.$state.fileList[i].isuploadFinished == 3) {
            uploadingStore.$state.fileList[i].controller.abort()
          }
        }
        uploadingStore.updateDialogUploadingVisible(false)
        ElMessage({
          type: 'success',
          message: '取消上传'
        })
        
        uploadingStore.reset()
       
      })
      .catch(() => {
        ElMessage({
          type: 'success',
          message: '继续上传'
        })
      })
  }
}

// 3. 最近列表
const tableData = ref([
  // {
  // 	"createdTime": "2023年7月1日 下午3:08",  //创建时间
  // 	"currentStatus": 0,  //当前状态,0未下载，1已下载，2已提取图片，3已提取音频，4转录中，5已转录
  // 	"deleteTime": "",
  // 	"exitOss": 0,   //视频上传状态, 0未上传，1已上传
  // 	"fileName": "1111",  //视频名字
  // 	"flag": 0,  //是否已经在UDS
  // 	"id": 0,   //视频id
  // 	"inputId": "",  //UDS的id
  // 	"isShow": 0,   //是否在主页展示
  // 	"ownby": "",   //归属者
  // 	"picture": "",
  // 	"recentUsedTime": "",  //最近使用时间
  // 	"title": "集团会议集团会议集团会议集团会议集团会议",   //视频标题
  // 	"totalTime": "",   //视频时长
  // 	"transferVideo": 0,   //语义语义转换是否完成
  // 	"url": "",     //视频播放连接
  // 	"userId": "",    //用户工号
  // 	"userName": "张小瑞"  ,  //用户姓名
  //   "recentUsedTime":''
  // }
])
const getRowKeys = (row) => {
  return row.id
}

// 轮询刷新--更新转写状态
const setTimeoutZdy = (option) => {
  setTimeout(function () {
    // console.log('轮询')
    // debugger
    try {
      if (typeof option.fn == 'function') {
        option.fn()
        if (option.isClose) {
          return
        }
      }
    } catch {}
    setTimeoutZdy(option)
  }, option.time || 5000)
}
var option = {
  isClose: false,
  fn: () => {
    let total = 0
    for (let i = 0; i < tableData.value.length; i++) {
      let item = tableData.value[i]
      if (item.transferFail == 0 && item.transferRate < 100) {
        total++
      }
    }
    if (total == 0) {
      option.isClose = false
    } else {
      
      // debugger
      request
        .get(
          '/sweet-api/mainpage/' +
            userId.value +
            '?current=' +
            currentPage.value +
            '&pageSize=' +
            pageSize.value
        )
        .then((res) => {
          // debugger
          // console.log("最近列表获取成功",res.data);
          if (res.data.code == 1) {
            for (let i = 0; i < tableData.value.length; i++) {
              // debugger
              for(let u=0;u<selectRows.value.length;u++){
                
                if(tableData.value[i].id==selectRows.value[u].id){
                  // debugger
                  
                  tableRef.value.toggleRowSelection(tableData.value[i],true) 
                }
              }
              
              for (let j = 0; j < res.data.data.length; j++) {
                if (tableData.value[i].id == res.data.data[j].id) {
                  // console.log(i,j)
                  tableData.value[i].transferFail = res.data.data[j].transferFail
                  tableData.value[i].transferRate = res.data.data[j].transferRate
                  tableData.value[i].picture = res.data.data[j].picture
                  tableData.value[i].totalTime = res.data.data[j].totalTime
                }
              }
            }
            
          }
        })
        .catch((error) => {
          console.log('最近列表获取失败', error)
        })
        .finally(()=>{
          
        })
    }
  },
  time: 5000
}

//获取年月日时分
const getYMDHS=(dateStr)=>{
  let date = new Date(dateStr);

  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hours = date.getHours();
  
  let minutes = date.getMinutes();
  minutes=(minutes<=9)?('0'+minutes):minutes;
  let seconds = date.getSeconds();

  let period = hours < 12 ? "上午" : "下午";
  let displayHours = hours > 12 ? hours - 12 : hours;

  let formattedDate = `${year}年${month}月${day}日 ${period}${displayHours}:${minutes}`;

  // console.log(formattedDate);
  return formattedDate
}


//如果2位数字的第一位为0，则去除0
const del0=(arr)=>{
  let str=arr.toString()
  if(str[0]==0){
    str=str.slice(1)
  }
  return str
}
// 获取文件时长：时分秒
const gettotalTimeHMS=(totalTime)=>{
  let arr= totalTime.split(":") || totalTime.split("：")
  let time
  if(arr.length==2){
    time=del0(arr[0]) +'分'+del0(arr[1])+'秒'
    
    return time
  }else if(arr.length==3){
    time=del0(arr[0]) +'时'+del0(arr[1]) +'分'+del0(arr[2])+'秒'

    return time
  }else{
    return totalTime
  }
}


// 3.1 点击图片，跳转到音视频详情页 音频：m4a、wav、pcm、amr  视频：m4v可以，flv不行，avi，mov，wmv
const goTodetailPage = (row) => {
  // debugger
  // 转写成功，才支持跳转到详情页row.transferRate == 100 &&row.transferFail == 0 &&
  if (  row.totalTime && !row.isShowInput && row.transferRate == 100 &&row.transferFail == 0 ) {
    if (row.fileName && (row.fileName.slice(-3) == 'mp4' || row.fileName.slice(-3) == 'm4v' || row.fileName.slice(-3) == 'flv'|| row.fileName.slice(-3) == 'avi'|| row.fileName.slice(-3) == 'mov'|| row.fileName.slice(-3) == 'wmv')) {
      router.push({
        path: '/video-page',
        query: {
          userId:userId.value,
          id: row.id,
          // title: row.title,
          // createdTime: row.createdTime,
          // totalTime: row.totalTime,
          // userName: row.userName,
          url: row.url,
          inputValue: inputValue.value ? inputValue.value : '',
          searchKeys:searchKeys.value?searchKeys.value:[],
          from:'recently'
        }
      })
    } else if(row.fileName && (row.fileName.slice(-3) == 'mp3' ||row.fileName.slice(-3) == 'm4a'||row.fileName.slice(-3) == 'wav')){
      router.push({
        path: '/audio-page',
        query: {
          userId:userId.value,
          id: row.id,
          // title: row.title,
          // createdTime: row.createdTime,
          // totalTime: row.totalTime,
          // userName: row.userName,
          url: row.url,
          inputValue: inputValue.value ? inputValue.value : '',
          searchKeys:searchKeys.value?searchKeys.value:[],
          from:'recently'
        }
      })
    }
  }
  
}

// 3.2 重命名
// 输入框内容
const renameValue = ref('')

const inputRef = ref('')

const edititem = (row) => {
  row.isShowInput = true
  renameValue.value = row.title
  nextTick(() => {
    // debugger
    inputRef.value.focus()
  })
}
// 输入框失去焦点
const blur = (row) => {
  
  console.log(1)
  if (renameValue.value) {
    // 隐藏输入框
    row.isShowInput = false
    
    //调用重命名接口
    resetName(row, renameValue.value)
  
  }
}
const handleEnter=(row)=>{
  //  debugger
   console.log(111)
   // 隐藏输入框
  row.isShowInput = false
}


// 3.3 单个移除
const deleteitem = (row) => {
  // debugger
  console.log(row.url)
  let arr=[]
  arr.push(row.id)
  ElMessageBox.confirm('确定移除当前选中项吗？', '移除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      //调用单个移除请求接口
      delateRecentlyItem(arr)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消移除'
      })
    })
}

// 跨页勾选, 删除时选中行
var selectRows = ref([])
const selectionChange = (selection) => {
  // selectRows.value = selection

  selectRows.value = JSON.parse(JSON.stringify(selection))
  
  // console.log('选中文件',selectRows.value)
}

// 3.4 批量移除
const shiftBtns = () => {
  console.log('selectRows.value', selectRows.value)
  let ids = []
  selectRows.value.forEach((item) => {
    ids.push(item.id)
  })
  ElMessageBox.confirm('确定移除当前选中项吗？', '移除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 发请求  批量移除接口
      delateRecentlyItem(ids)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消移除'
      })
    })
}

// 4.分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  //重新发请求，渲染设备列表
  if (inputValue.value != '') {
    getSearchRequest()
  } else {
    getRecentlyContentList()
  }
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)

  //重新发请求，渲染设备列表
  if (inputValue.value != '') {
    getSearchRequest()
  } else {
    getRecentlyContentList()
  }
}
</script>
<style lang="less">
.zdy_upload {
  .imgCont {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: orange;

    img {
      width: 18px;
      height: 18px;
      margin: 5px;
    }
  }
  .cont {
    color: rgba(16, 16, 16, 1);
    font-size: 16px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }
}
.kk-dialog-class {
  // pointer-events: none;
  inset: unset !important;
  .el-overlay-dialog {
    top: auto;
    left: auto;
  }
}
</style>
<style lang="less" scoped>
ul li {
  list-style: none;
  padding: 0;
}
.home {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  //1.导航栏
  .navigationBar {
    height: 111px;
    border-bottom: 1px solid rgba(239, 239, 239, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    .left {
      display: flex;
      justify-content: flex-start;
      .item {
        width: 56px;
        margin-right: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;

        & > div:nth-child(1) {
          width: 45px;
          height: 45px;
          border-radius: 4px;
          background-color: rgba(24, 144, 255, 1);
          img {
            width: 25px;
            height: 25px;
            margin: 10px;
          }
        }

        & > div {
          height: 20px;
          font-size: 14px;
          text-align: left;
          font-family: SourceHanSansSC-regular;
          white-space: nowrap;
        }
      }
    }
    .search {
      width: 480px;
      height: 34px;
      border-radius: 2px;
      color: rgba(206, 206, 206, 1);
      font-size: 14px;
      text-align: left;
      font-family: Roboto;
    }
  }
  // 2. 头部
  .top {
    height: 73px;
    border-bottom: 1px solid rgba(239, 239, 239, 1);
    display: flex;
    justify-content: space-between;

    flex: none;
    & > b {
      margin-top: 24px;
    }
    & > div {
      width: 80px;
      height: 32px;
      // line-height: 32px;
      margin-top: 24px;
      border-radius: 2px;

      // 上传文件
      .upload-demo {
        position: relative;
        z-index: 200;
        top: 0px;
      }
    }
  }

  // 3. 会议列表
  .tableBox {
    flex: 1;
    overflow: hidden;
    .recentlyList {
      width: 100%;
      height: 100%;
      padding-top: 14px;
      display: flex;
      flex-wrap: wrap;

      :deep(.el-table) {
        height: 100%;
        .fileContainer {
          display: flex;
          justify-content: flex-start;

          .fileImg {
            width: 160px;
            height: 90px;
            background-color: lightgray;
            border-radius: 4px;
            position: relative;
            margin-right: 20px;
            img {
              width: 160px;
              height: 100%;
            }
            
          }
          .fileInfo {
            width: 330px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            & > div {
              display: flex;

              img {
                width: 18px;
                height: 18px;
                margin-right: 4px;
                margin-top: 3px;
              }
            }

            & > div:nth-child(1) {
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100%;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              word-break: break-all;

              color: rgba(51, 51, 51, 1);
              font-size: 16px;
              text-align: left;
              font-family: SourceHanSansSC-regular;
            }
          }
        }

        //移除按钮
        .cell .el-button:nth-child(2) > span {
          color: red;
        }

        .el-table__header-wrapper thead .cell {
          color: rgba(51, 51, 51, 1);
          border-left: 1px solid rgba(206, 206, 206, 1);
        }
        .el-table__header-wrapper thead th:nth-child(1) .cell {
          border-left: none;
        }
      }
    }
  }

  // 4.分页
  .pagination-block {
    width: 100%;
    height: 52px;
    line-height: 52px;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    // 分页
    & > div {
      display: flex;
      justify-content: flex-end;
      .el-button {
        width: 48px;
        height: 32px;
        line-height: 32px;
        margin: 10px 10px 10px 8px;
        border-radius: 3px;
        background-color: rgba(79, 168, 249, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
      }
    }

    // 移除按钮
    .shiftBtn {
      width: 80px;
      height: 32px;
      line-height: 32px;
      border-radius: 2px;
      // background-color: rgba(255, 77, 79, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      opacity: 0;
    }
    .active {
      opacity: 1;
    }
  }

  // 上传音视频文件弹框
  :deep(.el-dialog) {
    .el-dialog__header {
      margin-right: 0px;
      border-bottom: 1px solid rgba(225, 227, 230, 1);
    }
    .el-dialog__body {
      padding: 20px;
      padding-bottom: 0px;

      .showFileList {
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(194, 199, 204, 1);
        .top1 {
          height: 40px;
          padding-left: 14px;
          padding-right: 14px;
          border-bottom: 1px solid rgba(225, 227, 230, 1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          // 添加按钮
          .tianjia {
            color: rgba(24, 144, 255, 1);
            font-size: 14px;
            text-align: right;
            font-family: SourceHanSansSC-regular;
          }
        }
        .fileList {
          padding: 7px 14px;
          padding-right: 0px;

          ul li {
            padding-top: 7px;
            padding-bottom: 7px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            & > div:nth-child(1) {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .name {
                color: rgba(16, 16, 16, 1);
                font-size: 16px;
                text-align: left;
                font-family: SourceHanSansSC-regular;
              }
              .size {
                color: rgba(145, 145, 145, 1);
                font-size: 14px;
                text-align: left;
                font-family: SourceHanSansSC-regular;
              }
            }
            img {
              width: 34px;
              height: 34px;
              margin-right: 10px;
            }
          }
        }
      }
    }
    //上传文件中有 文件列表，则将upload上传框 透明处理
    .el-dialog__body:has(.isShowUpload) {
      .el-upload-dragger {
        position: absolute;
        zoom: 0.2;
        right: 106px;
        top: 424px;
        background-color: transparent;
        opacity: 0;
      }
    }

    .el-dialog__footer {
      .el-button {
        width: 80px;
      }
    }
  }

  //上传中弹框
  :deep(.dialoguploading) {
    width: 400px;
    position: fixed;
    right: 0;
    bottom: -46px;
    border: 1px solid rgba(233, 233, 233, 1);
    .el-dialog__header {
      .title {
        display: flex;
        justify-content: space-between;
        // 折叠按钮
        .isFold {
          width: 22px;
          position: absolute;
          top: 20px;
          right: 46px;
        }
      }
    }

    .el-dialog__body {
      padding: 0px;
      padding-bottom: 0px;

      .showuploadingList {
        display: flex;
        flex-direction: column;

        .top2 {
          height: 40px;
          display: flex;
          background-color: rgba(244, 244, 244, 1);
          justify-content: space-between;
          align-items: center;
          & > div:nth-child(1) {
            margin-left: 20px;
          }
          // 添加按钮
          & > div:nth-child(2) {
            margin-right: 20px;
          }
        }
        .uploadingList {
          padding: 7px 14px;
          padding-right: 0px;
          // margin-left: -42px;

          ul {
            li {
              padding-top: 7px;
              padding-bottom: 7px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              & > div:nth-child(1) {
                width: 300px;
                overflow: hidden;

                display: flex;
                justify-content: flex-start;
                align-items: center;
                .name {
                  color: rgba(16, 16, 16, 1);
                  font-size: 16px;
                  text-align: left;
                  font-family: SourceHanSansSC-regular;
                }
                .size {
                  color: rgba(145, 145, 145, 1);
                  font-size: 14px;
                  text-align: left;
                  font-family: SourceHanSansSC-regular;
                }
                img {
                  width: 34px;
                  height: 34px;
                  margin-right: 10px;
                }
              }

              .pauseOrDelBtn {
                display: flex;
                align-items: center;
                margin-right: 6px;
                img {
                  width: 22px;
                  height: 22px;
                  display: none;
                }
                .el-icon svg {
                  display: none;
                }
              }
            }
            :hover {
              // background-color: red;
              .pauseOrDelBtn {
                display: flex;
                align-items: center;
                margin-right: 6px;
                img {
                  display: inline-block;
                }
                .el-icon svg {
                  display: inline-block;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
